<template>
  <div>
    <el-row>
      <el-col :span="8">
        <h3 style="margin-top: 30px;color: #8c939d">我的加班申请情况</h3>
      </el-col>
      <el-col :span="12" :offset="4">
        <div class="grid-content bg-purple-dark" style="margin-top: 40px;margin-right: 20px">

          <el-select v-model="value" placeholder="请选择" id="select" style="margin-left: 40px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          &nbsp;
          <el-button type="success" @click="submit">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <el-col :span="22" :offset="1">
      <div class="grid-content bg-purple-light">
        <el-table
          height="400"
          :data="tableDatas"
          style="width: 100%">
          <el-table-column
            label="开始时间"
            width="160">
             <template slot-scope="scope">
               {{ scope.row.start|dataFMT('YYYY-MM-DD HH:mm:ss') }}
             </template>
          </el-table-column>
          <el-table-column
            label="结束时间"
            width="160">
             <template slot-scope="scope">
               {{ scope.row.end|dataFMT('YYYY-MM-DD HH:mm:ss') }}
             </template>
          </el-table-column>
          <el-table-column
            prop="hours"
            width="120"
            label="加班时长">
          </el-table-column>
          <el-table-column
            prop="desc"
            width="220"
            label="加班描述">

          </el-table-column>

          <el-table-column
            prop="image"
            width="100"
            label="加班图片">
            <template slot-scope="scope">
              <div class="demo-image__preview">
              <el-image
                style="width: 80px;"
                :src="scope.row.image"
                :preview-src-list="[scope.row.image,]">
              </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="checker"
            width="120"
            label="审核人">
          </el-table-column>

          <el-table-column
            v-if="is_show===3"
            prop="result"
            label="失败描述">
          </el-table-column>
          <el-table-column label="操作" v-if="is_show!==2">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="openDelete(scope.$index, scope.row)">删除申请
              </el-button>
              <br>
              <br>
              <el-button
                size="mini"
                type="primary"
                v-if="is_show===1"
                @click="handleDetail(scope.$index, scope.row)">提醒审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="警告"
          :visible.sync="dialogVisible"
          width="30%"
          >
          <span style="color: red">是否永久删除此加班申请？？</span>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleDelete">确 定</el-button>
  </span>
        </el-dialog>
      </div>
      <div class="pagenation">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="page_size"
          @prev-click="prevfun"
          @next-click="nextfun"
          @current-change="currentchange"
        >
        </el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
  export default {
    name: 'ManageOvertimeView',
    data () {
      return {
        row: '',
        dialogVisible:false,
        is_show: 1,//控制失败描述的显示
        total: 5, //所有数据个数
        page_size: 1,//每页数量
        options: [{
          value: 1,
          label: '未审核'
        }, {
          value: 2,
          label: '审核通过'
        },
          {
            value: 3,
            label: '审核不通过'
          }
        ],
        value: 1,
        tableDatas: []
      }
    },
    mounted () {
      this.get_data()
    },
    methods: {
      submit () {
        this.is_show = this.value
        this.tableDatas = []
        this.get_data()
      },
      handleDetail (index, row) {

      },
      openDelete (index, row) {
        this.row=row
        this.dialogVisible=true
      },
      handleDelete () {
        this.dialogVisible=false
        var type = this.value//拿到用户删除时，查看的是什么审核结果
        this.$axios({
          url: this.$settings.base_url + `/user/extrawork/?id=${this.row.id}`,
          method: 'delete'
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('删除出差申请成功')
            this.value = type
            this.get_data()

          } else {
            this.$message.error(`操作失败，${res.data.error}`)
          }
        })

      },
      get_data (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/extrawork/?page=${page}&type=${this.value}`,
          method: 'get'
        }).then(res => {
          //获取到用户信息，赋值给变量
          console.log(res)
          this.tableDatas = res.data.results
          // this.prev = res.data.links.previous
          // this.next = res.data.links.next
          this.total = res.data.count
          this.page_size = res.data.page_size
        })
      },

      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_data(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_data(value)
      },
      currentchange (value) {
        this.get_data(value)

      },
    },
    // computed:{
    //   is_show(){
    //     return this.value
    //   }
    // },
  }
</script>

<style scoped>
  #select {
    text-align: left;
    margin-top: 50px;

  }

</style>
